<template>
  <el-dialog title="切换频道" :lock-scroll="false" :visible.sync="visible" customClass="joinChannelBox">
    <div class="joinChanneldialog">
      <el-radio-group v-model="radioValue=vv_config.current" @change="getradioValue(radioValue)">
        <el-radio :label="0">通道一</el-radio>
        <el-radio :label="1">通道二</el-radio>
        <el-radio :label="2">通道三</el-radio>
      </el-radio-group>
      <div class="assareInfo" v-for="(item,index) in vv_config.list" v-if="index==radioValue">
        <p class="assareInfoName">通道{{index+1}}</p>
        <p class="assareInfoTitle">推流地址：{{item.url}}</p>
        <p class="assareInfoCon">流密钥：{{item.key}}</p>
        <p class="assareInfoCon"></p>
      </div>
      <div class="s-an-d-footer-btn">
        <button class="s-an-cancel" type="button" @click="joinChannelcancel">取消</button>
        <button class="s-an-f" @click="joinChannelpost" type="button">保存</button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        radioValue: 0,
        code:'',
      }
    },
    props: {
      vv_config: {
        default: false,
      },
    },
    methods: {
      joinChannelcancel () {
        this.visible = false
      },
      getradioValue (radioValue) {
        console.log(radioValue)
        this.radioValue = radioValue
        this.code = this.vv_config.list[radioValue].code
      },
      joinChannelpost () {
        let params = {
          code: this.code||this.vv_config.list[this.radioValue].code
        }
        this.$http.post('/index/beta_api/changeVvCode', params).then((res) => {
          if (res.code==1) {
            this.visible = false
            this.$message({
              message: res.msg,
              type: 'success',
            })
          } else {
            this.$message({
              message: res.msg,
              type: 'error',
            })
          }
        })
      },
    },
  }
</script>

<style lang="scss">
  .joinChannelBox {
    width: 500px;
    &.el-dialog {
      .el-dialog__header {
        text-align: left;
        border-bottom: solid 1px #dddddd;
        padding-top: 10px;
        padding-bottom: 6px;
        .el-dialog__headerbtn {
          top: 8px;
          right: 12px;
        }
      }
    }
    .el-dialog__body {
      padding: 12px 14px 15px;
    }
    .joinChanneldialog {
      text-align: center;
      .el-radio-group {
        margin: 20px 0;
        .el-radio {
          margin-right: 40px;
          &:last-child {
            margin-right: 0;
          }
        }
      }
      .assareInfo {
        text-align: left;
        width: 400px;
        font-size: 14px;
        color: #333;
        margin: auto;
      }
      .s-an-d-footer-btn {
        text-align: right;
        margin-top: 15px;
        .s-an-cancel {
          width: 105px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          margin-right: 10px;
          border-radius: 3px;
          border: solid 1px #dddddd;
          background: #ffffff;
        }
        .s-an-f {
          width: 105px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border: solid 1px #3c92e8;
          margin-right: 10px;
          background-color: #3c92e8;
          border-radius: 3px;
          color: #ffffff;
        }
      }
    }
  }
</style>
